<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" :title="myTitle" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="changing">
			<!-- 图片 -->
			<view class="changing-img-box">
				<image v-if="voucherImage" class="changing-img" @click="uploadImg" :src="voucherImage"></image>
				<view v-else class="changing-img-icon-add" @click="uploadImg"></view>
			</view>
			<!-- 表单信息 -->
			<view class="changing-form">
				<view class="uni-form-item">
					<view class="uni-form-title">商家手机</view>
					<view class="uni-form-value">
						<input :disabled="id" v-model="storePhone" class="uni-input" type="number" placeholder="商家手机号" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-title">实付金额</view>
					<view class="uni-form-value">
						<input v-model="sellingPrice" class="uni-input" type="number" placeholder="实付金额" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-title">商家额度</view>
					<view class="uni-form-value">
						<input v-model="facePrice" class="uni-input" type="number" placeholder="商家额度" />
					</view>
				</view>
				<view style="font-size: 32rpx; padding-top: 20rpx;">商家额度<text style="color: red;">不是</text>实际支付金额</view>
			</view>
			<view class="chinging-btn-box">
				<button type="default active" @click="submitForm">提交确认申请</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		data() {
			return {
				myTitle: '',
				id: '',
				storeId: '', // 店铺ID
				voucherImage: '', // 支付凭证地址
				sellingPrice: '', // 实际支付金额
				facePrice: '', // 商家额度
				storePhone: '', // 手机号
			};
		},
		components: {
			uniNavBar
		},
		onLoad(e) {
			const token = uni.getStorageSync('d_token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('d_role')
					uni.removeStorageSync('d_memberId')
					uni.removeStorageSync('d_token')
					uni.removeStorageSync('d_openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			if (e && e.id) {
				this.id = e.id
			} else {
				this.id = ''
			}
			if (e && e.storeId) {
				this.storeId = e.storeId
				this.myTitle = '修改凭证'
				uni.setNavigationBarTitle({
					title: '修改凭证'
				})
			} else {
				this.storeId = ''
				this.myTitle = '新增凭证'
				uni.setNavigationBarTitle({
					title: '新增凭证'
				})
			}
			if (e && e.voucherImage) {
				this.voucherImage = e.voucherImage
			} else {
				this.voucherImage = ''
			}
			if (e && e.sellingPrice) {
				this.sellingPrice = e.sellingPrice
			} else {
				this.sellingPrice = ''
			}
			if (e && e.facePrice) {
				this.facePrice = e.facePrice
			} else {
				this.facePrice = ''
			}
			if (e && e.storePhone) {
				this.storePhone = e.storePhone
			} else {
				this.storePhone = ''
			}
		},
		methods: {
			uploadImg() {
				uni.chooseImage({
					count: 1,
					success: ((res) => {
						uni.uploadFile({
							url: `${config.api_base_url_tools}oss/upload`,
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
							},
							success: ((res_upload) => {
								const res = JSON.parse(res_upload.data)
								let { status, data } = res
								if (status.flag === true) {
									this.voucherImage = data
								} else {
									this.voucherImage = ''
								}
							}),
							fail: (() => {
								uni.showToast({
									icon: 'none',
									title: '上传失败, 网络异常'
								})
							})
						});
					})
				});
			},
			submitForm() {
				const obj = {}
				if (this.storeId) {
					obj.storeId = this.storeId
				}
				if (this.id) {
					obj.id = this.id
				}
				if (this.voucherImage) {
					obj.voucherImage = this.voucherImage
				}
				if (this.sellingPrice) {
					obj.sellingPrice = this.sellingPrice
				}
				if (this.facePrice) {
					obj.facePrice = this.facePrice
				}
				if (this.storePhone) {
					obj.storePhone = this.storePhone
				}
				
				if (!obj.voucherImage) {
					uni.showToast({
						icon: 'none',
						title: '请上传支付凭证'
					})
					return false
				}
				if (!obj.sellingPrice) {
					uni.showToast({
						icon: 'none',
						title: '请填写实际支付金额'
					})
					return false
				}
				if (!obj.facePrice) {
					uni.showToast({
						icon: 'none',
						title: '请填写商家额度'
					})
					return false
				}
				if (!obj.storePhone) {
					uni.showToast({
						icon: 'none',
						title: '请填写手机号'
					})
					return false
				}
				if (obj.storeId) { // 修改
					uni.request({
						url: `${config.api_base_url}agent/confirmation/${obj.id}`,
						method: 'PUT',
						header: {
							AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
						},
						data: obj,
						success: ((res) => {
							let { status, data } = res.data
							if (status.flag === true) {
								uni.showToast({
									icon: 'none',
									title: '修改凭证成功'
								})
								setTimeout(() => {
									uni.navigateBack({})
								}, 777)
							} else {
								uni.showToast({
									icon: 'none',
									title: status.msg
								})
							}
						}),
						fail: (() => {
							uni.showToast({
								icon: 'none',
								title: '修改失败, 网络异常'
							})
						})
					})
				} else { // 新增
				    uni.request({
				    	url: `${config.api_base_url}agent/confirmation`,
				    	method: 'POST',
				    	header: {
				    		AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
				    	},
				    	data: obj,
				    	success: ((res) => {
				    		let { status, data } = res.data
				    		if (status.flag === true) {
				    			uni.showToast({
				    				icon: 'none',
				    				title: '新增凭证成功'
				    			})
				    			setTimeout(() => {
				    				uni.navigateBack({})
				    			}, 777)
				    		} else {
				    			uni.showToast({
				    				icon: 'none',
				    				title: status.msg
				    			})
				    		}
				    	}),
				    	fail: (() => {
				    		uni.showToast({
				    			icon: 'none',
				    			title: '修改失败, 网络异常'
				    		})
				    	})
				    })
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	view,
	image {
		box-sizing: border-box;
	}

	.changing-img-box {
		position: relative;
		width: 100%;
		height: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		background-color: #f2f2f2;
		padding: 20rpx;

		.changing-img {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.changing-img-icon-add {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);

			&::before,
			&::after {
				background-color: #8e8282;
				opacity: 0.8;
				content: "";
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
				border-radius: 20rpx;
			}

			&::before {
				width: 20rpx;
				height: 100%;
			}

			&::after {
				width: 100%;
				height: 20rpx;
			}
		}
	}

	.changing-form {
		width: 100%;
		padding: 20rpx;

		.uni-form-item {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			// margin-bottom: 40rpx;
			display: flex;
			overflow: hidden;
			justify-content: space-between;

			.uni-form-title {
				width: 200rpx;
			}

			.uni-form-value {
				flex: 1;
				border-bottom: 2rpx solid #f2f2f2;

				input {
					width: 100%;
					height: 100%;
					line-height: 80rpx;
				}
			}
		}
	}

	.chinging-btn-box {
		padding: 20rpx;

		button {
			width: 100%;
			color: #fff;
			background-color: #F02230;

			&.active {
				background-color: #F02230;
				color: #fff;
			}
		}
	}
</style>
